<template>
  <div class="table-root-lay">
    <div class="topMainTool" :style="[getMainToolStyle()]">
      <div class="searchTool">
        <div style="float: right;display: flex;flex-direction: row;align-items: center;height: 100%; margin-right: 16px;">
          <el-button style="background: #484b55;border-radius: 4px;border: none;" :size="config.layout.buttonSize" type="danger" icon="Close">清空</el-button>
          <el-button style="background: #448dfe;border-radius: 4px;border: none;" :size="config.layout.buttonSize" type="primary" icon="Search">查询</el-button>
          <el-button :size="config.layout.buttonSize" :icon="moreIcon"
                     v-if="showMoreButton" :disabled="disableMoreButton"
                     @click="onMoreSearch">更多...
          </el-button>
        </div>
        <el-form style="display: flex;flex-direction: row;align-items: center;">
          <slot name="search"/>
        </el-form>
      </div>
      <!-- 扩展搜索区域 -->
      <div class="search-extra-tools" :style="[getMainExtraSearchStyle()]" v-show="showExtra">
        <slot name="moreSearch"/>
      </div>
    </div>
    <div class="table-body-lay table-body-class table-body">
      <div class="table-main-tools">
        <slot name="actions"/>
        <el-button :size="config.layout.actionButtonSize" icon="Refresh">
          刷新
        </el-button>
        <div class="table-flex"/>
        <el-dropdown :hide-on-click="false" trigger="click" style="float:right">
          <el-button size="small" icon="Grid"></el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-scrollbar style="max-height:200px;">
                <el-dropdown-item v-for="(item) in config.columns" :key="item.id" @change="onChangeCol(item)">
                  <el-checkbox :key="item.id" :label="item" v-model:checked="item.show">
                    {{ item.name }}
                  </el-checkbox>
                </el-dropdown-item>
              </el-scrollbar>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <!-- 主表 -->
      <el-table class="table-main"
                :header-cell-style="{ background: '#F7FBFE', color: '#000' }"
                stripe
                :data="data"
                :border="false"
                sortable="custom"
                @sort-change="sortChangeHandle"
                @selection-change="selectionChangeHandle">
        <el-table-column v-if="config.hasSelect" type="selection" header-align="center" align="center" width="50"/>
        <template v-for="(item) in config.columns" :key="item.id">
          <el-table-column :prop="item.id" header-align="center" align="center" :label="item.name"
                           :sortable="item.sort" v-if="showCol(item)" :fixed="item.fixed">
            <template #default="scope" v-if="item.operations && item.operations.length > 0">
              <template v-for="(op) in item.operations" :key="op.name">
                <el-button link type="primary" size="small"
                           @click="() => op.callback(item, toRaw(scope.row), scope.$index)">
                  {{ op.name }}
                </el-button>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <!-- 翻页器 -->
      <el-pagination
          class="table-pagination"
          style="margin-top:4px;width: 100%;"
          background
          :current-page="config.page.current || 1"
          :page-sizes="[10, 20, 50, 100]"
          :default-page-size="config.page.pageSize || 10"
          :total="config.page.total || 0"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref, shallowRef, toRaw} from "vue";

interface TableConfig {
  hasSelect: number;
  showSearch?: boolean | undefined;
  setting: {
    showMoreSearch?: boolean | undefined;
    showMoreButton?: boolean | undefined;
    disableMoreButton?: boolean | undefined;
    searchBackground?: string;
    extraSearchBackground?: string;
  };
  layout: {
    buttonSize?: string | undefined,
    actionButtonSize?: string | undefined,
    inputSize?: string | undefined,
  };
  page: {
    current: number,
    pageSize: number,
    total: number,
  };
  columns: any;
}

const cfgProps = withDefaults(defineProps<{
  config: TableConfig
}>(), {
  config: () => {
    return {
      hasSelect: false,
      showSearch: true,
      setting: {
        showMoreSearch: false,
        showMoreButton: true,
        disableMoreButton: true,
        searchBackground: "#333840",
        extraSearchBackground: "#484B55",
      },
      layout: {
        buttonSize: 'small',
        actionButtonSize: 'small',
        inputSize: 'small',
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [],
    }
  }
});

const moreIcon = ref('ArrowDown');
const disableMoreButton = ref(cfgProps.config.setting?.disableMoreButton || true);
const showExtra = ref(cfgProps.config.setting?.showMoreSearch || false);
const showMoreButton = shallowRef(showExtra.value && cfgProps.config.setting.showMoreButton);
const data = ref([]);

data.value.push({
  operTime: '2016-09-02',
  name: 'licode',
  role: '超级管理员',
  logType: '增加角色',
  content: 'asdassfsdf'
});

const onMoreSearch = () => {
  showExtra.value = !showExtra.value;
}

const getMainToolStyle = () => {
  return {
    "background": cfgProps.config.setting.searchBackground || "#333840"
  }
}

const getMainExtraSearchStyle = () => {
  return {
    "background": cfgProps.config.setting.extraSearchBackground || "#484B55"
  }
}

const onChangeCol = (item: TableColumn) => {
  item.show = !item.show;
}

const sortChangeHandle = () => {

}

const selectionChangeHandle = () => {

}

const sizeChangeHandle = () => {

}

const currentChangeHandle = () => {

}

const showCol = (item: TableColumn) => {
  return item.show;
}

</script>

<style scoped>
.table-root-lay {
  height: 100%;
  display: flex;
  flex: 1;
  font-size: 32px;
  flex-direction: column;
}

.topMainTool {
  background: #333840;
  margin: 0;
  padding: 0 0 0;
  display: flex;
  min-height: 52px;
  flex-direction: column;
  justify-content: center;
}

.searchTool {
  margin: 0;
  padding: 0 8px 8px;
}

:deep(.el-form-item) {
    margin: 0 8px 0 0;
}

.el-form-item {
  color: #C7C8CA;
  margin: 0;
}

.table-body-class {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 32px 0;
}

.table-body {
  flex: 1;
  display: flex;
}

.table-main {
  width: 100%;
  flex: 1;
}

.table-flex {
  flex: 1;
}

.search-extra-tools {
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #484B55;
  border-radius: 4px;
  font-size: 12px;
}

.table-main-tools {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-size: 12px;
  background: #F3F4F9;
  padding: 8px 8px;
  margin: 16px 0 16px;
}

.table-body-lay {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-pagination {
  padding: 8px 16px 16px;
}

.headerStyle {
  background: #F3F4F9;
}

</style>
